<template>
  <a-modal
    :title="title"
    :visible="visible"
    :destroyOnClose="true"
    :width="700"
    :body-style="{
      height: 'calc(100% - 110px)',
      boxSizing: 'border-box',
      overflow: 'auto',
    }"
    @cancel="onClose"
    centered
  >
    <a-form layout="vertical">
      <a-row :wrap="true" :gutter="12">
        <a-col :span="12">
          <a-form-item label="状态名称" v-bind="validateInfos.name">
            <a-input
              v-model:value="formData.name"
              placeholder="请输入状态名称"
              :maxlength="20"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="排序" v-bind="validateInfos.sort">
            <a-input-number
              v-model:value="formData.sort"
              :precision="0"
              class="w-100p"
              placeholder="请输入排序值"
              :min="1"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="阶段描述" v-bind="validateInfos.desc">
            <a-textarea
              placeholder="请输入阶段描述"
              :auto-size="{ minRows: 3 }"
              v-model:value="formData.desc"
              :maxlength="200"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <div class="drawer-footer">
      <a-space>
        <a-button @click.prevent="onClose"> 取消 </a-button>
        <a-button type="primary" @click.prevent="onSubmit"> 提交 </a-button>
      </a-space>
    </div>
  </a-modal>
</template>
<script>
import { defineComponent, reactive, toRefs, computed, watch } from "vue";
import { Form, message } from "ant-design-vue";
import store from "../../../../store";
import request from "../../../../common/utils/request";
import {
  TextTip,
} from "bl-common-vue3";
const useForm = Form.useForm;
const dateFormatStr = "YYYY-MM-DD";

export default defineComponent({
  name: "AddCustomerStatus",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
    editInfo: {
      type: Object,
      default: () => ({}),
    }
  },
  components: {TextTip},
  setup(props, { emit }) {
    const state = reactive({

    });

    const title = computed(() => {
      return props.id ? '编辑状态' : '新建状态';
    });

    const formData = reactive({
      name: '',
      sort: undefined, // 排序值
      desc: '',
    });
    const ruleRef = reactive({
      name: [{ required: true, message: "必填" }],
      sort: [{ required: true, message: "必填" }],
    });

    const { resetFields, validate, validateInfos} = useForm(formData, ruleRef);

    const onSubmit = () => {
      validate().then(() => {
        let params = {};
        for (let key in formData) {
          if (formData[key] || formData[key] === 0) {
            params[key] = formData[key];
          }
        }
        let requestType = props.id ? 'put' : 'post';
        let requestUrl = props.id ? '/business/customer/statusEdit' : '/business/customer/statusAdd';
        if (props.id) {
          params.id = props.id;
        }
        request[requestType]("/org", requestUrl, params).then((res) => {
          message.success(res.msg || props.id ? '编辑成功!' :  "添加成功!");
          emit("success");
        });
      });
    };



    const onClose = () => {
      emit("handleCancel");
    };


    const setModelRef = (state) => {
      for (let key in state) {
        formData[key] = state[key];
      }
    };


    const init = () => {
      if (!props.id) return;
      // 回显详情
      setModelRef({
        name: props.editInfo?.name,
        sort: props.editInfo?.sort, // 排序值
        desc: props.editInfo?.desc,
      })
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          resetFields();
        }
      }
    );

    return {
      ...toRefs(state),
      formData,
      validateInfos,
      title,
      onClose,
      onSubmit,
    };
  },
});
</script>
